<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>    	
		<link rel="stylesheet" href="css/style.css" type="text/css" />		
		<script type="text/javascript" src="mapwrapper.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Map Image API example</title>
    </head>
    <body onload="init();">
    
        <script type="text/javascript">  
            // This is called when the page is loaded
            function init() {				
				// Check if the device supports HTML5 geolocation
                if (!(navigator && navigator.geolocation)) {
					// If geolocation is not supported, use default coordinates
                    setMap({ coords : { latitude : "61.4988", longitude : "23.7637" }});									
                } 
				
				else {
					// If geolocation is supported, use the provided location
					// if the location request fails, call error callback
                    navigator.geolocation.getCurrentPosition(setMap, positionError);						
                }				
            }
            
			// Function to update map to DOM (id: container) background			
            function setMap(position) {
                
                var target = document.getElementById("container");	
                target.innerHTML = "";	
                
				// Set CSS background image by using OviMap class
				// Note the use of getCSSUrl() to get formatted url for use in CSS
                target.style.backgroundImage = new MapImage({
                    center : { lat : position.coords.latitude , lon : position.coords.longitude }, 
                    zoom : 12, 
                    size : { width : 220, height : 220 } 
                }).getCSSUrl();                							            
            }
			
			function positionError(error){
				// Replace "loading" text with the error message 
                var target = document.getElementById("container");
                target.innerHTML = error.message;	
                target.style.backgroundImage = "";				
			}
      				   
			function Chicago(){
				setMap({ coords : { latitude : "41.865", longitude : "-87.6343" }});
			}
			function Beijing(){
				setMap({ coords : { latitude : "39.90747", longitude : "116.38982" }});			
			}
			function updateMap(){
				var selList = document.getElementById("selectList");
				switch(selList.options[selList.selectedIndex].value){
					case "Chicago":
						Chicago();
						break;
					case "Beijing":
						Beijing();
						break;
					case "my":
						init();
						break;
					default:
						init();
						break;
				}				
			}
        </script>
        
		<!-- Options menu for selecting the displayed map -->
		<div class="navi">
			<select id="selectList" onchange="updateMap();">
				<option value="my">My location</option>
				<option value="Beijing">Beijing</option>
				<option value="Chicago">Chicago</option>				
			</select>		
		</div>
		
		<!-- Container DOM -->
        <div id="container"></div>
						
    </body>
</html>
